import {connect} from 'react-redux'
function SearchMain ({
  firstView,
  loading,
  errMsg,
  users
}) {

  if (firstView) {
    return <h3>输入关键字搜索</h3>
  } else if (loading) {
    return <h3>加载中...</h3>
  } else if (errMsg) {
    return <h3>{errMsg}</h3>
  }

  // [{name, avatar_url, url}]

  return (
    <div className="row">
      {
        users.map(user => <div className="card" key={user.name}>
          <a href={user.url} target="_blank">
            <img src={user.avatar_url} style={{width: 100}}/>
          </a>
          <p className="card-text">{user.name}</p>
        </div>)
      }
    </div>
  )
}

export default connect(
  state => ({
    firstView: state.search.firstView,
    loading: state.search.loading,
    errMsg: state.search.errMsg,
    users: state.search.users
  }),
  null
)(SearchMain)

/* 
{
  counter: {count: 0}
  search: {
    firstView: true,
    loading: false,
    errMsg: '',
    users: []
  }
}
*/